import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:shop/common/common.dart';

class GoodDetailPage extends StatefulWidget {
  final Map<String, dynamic> model;
  final String? title;
  final String img;
  const GoodDetailPage({Key? key, required this.model, this.title, required this.img}) : super(key: key);

  @override
  State<GoodDetailPage> createState() => _GoodDetailPageState();
}

class _GoodDetailPageState extends State<GoodDetailPage> {
  List<String> _banner = [];
  final _focus = FocusNode();
  bool show = false;
  @override
  void initState() {
    super.initState();
    _banner.addAll([
      widget.img,
      'https://p2.ssl.qhimgs1.com/sdr/400__/t01af078e4e98698112.jpg',
      'https://icweiliimg1.pstatp.com/weili/bl/235333851068760130.jpg',
      'https://icweiliimg1.pstatp.com/weili/bl/247446552196678075.jpg',
      'https://img2.baidu.com/it/u=1947905409,1682935614&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          _focus.unfocus();
          setState(() {
            show = false;
          });
        },
        behavior: HitTestBehavior.translucent,
        child: Stack(
          fit: StackFit.expand,
          children: [
            SingleChildScrollView(
              padding: const EdgeInsets.only(bottom: 60),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Stack(
                    children: [
                      SizedBox(
                        height: 280,
                        child: Swiper(
                          itemBuilder: (BuildContext context, int index) {
                            return Stack(
                              children: <Widget>[
                                SizedBox(
                                  width: MediaQuery.of(context).size.width,
                                  child: AspectRatio(
                                    aspectRatio: 75 / 54,
                                    child: CachedNetworkImage(
                                      imageUrl: _banner[index],
                                      fit: BoxFit.cover,
                                      fadeInDuration: Duration.zero,
                                      placeholder: (BuildContext context, String url) {
                                        return const Placeholder();
                                      },
                                    ),
                                  ),
                                ),
                              ],
                            );
                          },
                          itemCount: _banner.length,
                          autoplay: true,
                          pagination: const SwiperPagination(),
                        ),
                      ),
                      Positioned(
                        right: 16,
                        top: 10,
                        child: GestureDetector(
                          onTap: () {
                            EasyLoading.showToast("分享成功");
                          },
                          child: SafeArea(
                            child: Icon(
                              Icons.share,
                              size: 16,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 16.0, left: 12, right: 12),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Expanded(
                              child: Text(
                                widget.title ?? widget.model['title'],
                                style: AppFont.textStyle(18, fontWeight: FontWeight.bold),
                              ),
                            ),
                            const SizedBox(
                              width: 20,
                            ),
                            Text(
                              "\$${widget.model['id'] / 1000}",
                              style: AppFont.textStyle(
                                18,
                                fontWeight: FontWeight.bold,
                                color: Colors.redAccent,
                              ),
                            ),
                            const Icon(
                              Icons.shopping_cart_sharp,
                              color: Colors.redAccent,
                              size: 18,
                            )
                          ],
                        ),
                        const SizedBox(height: 30),
                        Divider(),
                        const SizedBox(height: 30),
                        Text(
                          "商品简介",
                          style: AppFont.textStyle(16, fontWeight: FontWeight.bold),
                        ),
                        const SizedBox(height: 15),
                        Text(
                          widget.model['title'] * 100,
                          style: TextStyle(fontSize: 10, color: AppColor.font666, height: 1.5),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                color: Colors.white,
                height: 60,
                width: double.infinity,
                padding: const EdgeInsets.symmetric(horizontal: 16),
                alignment: Alignment.center,
                child: Row(
                  children: [
                    _Item(
                      onTap: () {
                        _focus.requestFocus();
                        show = !show;
                        setState(() {});
                      },
                    ),
                    Spacer(),
                    GestureDetector(
                      onTap: () async {
                        EasyLoading.show(status: 'Loading...');
                        await Future.delayed(const Duration(seconds: 1));
                        EasyLoading.showToast("购买成功");
                        Navigator.pop(context);
                      },
                      child: Container(
                        height: 44,
                        width: 120,
                        decoration: BoxDecoration(borderRadius: BorderRadius.circular(50), color: Colors.redAccent),
                        alignment: Alignment.center,
                        child: Text(
                          "立即抢购",
                          style: AppFont.textStyle(16, color: Colors.white),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              height: 60,
              child: Visibility(
                visible: show,
                child: CupertinoTextField(
                  focusNode: _focus,
                  placeholder: "说点儿什么吧~",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _Item extends StatefulWidget {
  final Function()? onTap;
  const _Item({Key? key, this.onTap}) : super(key: key);

  @override
  State<_Item> createState() => _ItemState();
}

class _ItemState extends State<_Item> {
  bool isAdd = false;
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          onPressed: () {
            setState(() {
              isAdd = !isAdd;
            });
          },
          icon: Row(
            children: [
              Icon(
                Icons.thumb_up,
                size: 16,
                color: isAdd ? Colors.redAccent : Colors.grey,
              ),
              Text(
                " ${isAdd ? 1 : 0}",
                style: const TextStyle(fontSize: 16),
              ),
            ],
          ),
        ),
        GestureDetector(
          onTap: widget.onTap,
          child: Row(
            children: [
              Icon(
                Icons.chat_bubble_outline,
                size: 16,
                color: Colors.grey,
              ),
              Text(
                "评论",
                style: const TextStyle(fontSize: 16),
              ),
            ],
          ),
        ),
      ],
    );
  }
}
